<template>
  <div class="hello">
    <h1>病历</h1>
    <div class="cont">
      <div class="label"><b>现病史:</b></div>
      <div class="input_box">
        <span v-for="item in list" :key="item.id">
          <span v-if="item.type == 'Normal'"><Normal :item="item"/></span>
          <span v-if="item.type == 'SingleChoice'"><SingleChoice :item="item"/></span>
        </span>
      </div>
    </div>
  </div>
</template>

<script>
import Normal from "./textType/Normal";
import SingleChoice from "./textType/SingleChoice";

export default {
  name: 'HelloWorld',
  data() {
    return {
      list: [
        {
          type: 'Normal',
          indexName:"出现咳痰、全身酸痛,",
          isAnswered:false, 
          value:'出现咳痰、全身酸痛,',
        },
        {
          type: 'SingleChoice',
          indexName:"是否头疼,",
          isAnswered:false, 
          value:'',
          values:[
            {
              id:0,
              text: "非常的疼",
              value: "非常的疼",
              optionText: "非常的疼"
            },
            {
              id:0,
              text: "一点不疼",
              value: "一点不疼",
              optionText: "一点不疼"
            },
          ]
        },
        {
          type: 'SingleChoice',
          indexName:"当前精神状态",
          isAnswered:false, 
          value:'精神状态明显差',
          values:[
            {
              id:0,
              text: "精神状态好",
              value: "精神状态好",
              optionText: "精神状态好"
            },
            {
              id:0,
              text: "精神状态稍差",
              value: "精神状态稍差",
              optionText: "精神状态稍差"
            },
             {
              id:0,
              text: "精神状态明显差",
              value: "精神状态明显差",
              optionText: "精神状态明显差"
            },
          ]
        }
      ],
    };
  },
  components: { Normal,SingleChoice },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
h3 {
  margin: 40px 0 0;
}
.cont{
  display: flex;
  align-items: center;
  margin: 0 auto;
  width: 700px;
  .label{
    width: 100px;
  }
  .input_box{
    width: 100%;
    display: inline-block;
    text-align: left;
    border-radius: 5px;
    border: 1px solid rgba(211,211,211,.58);
    padding: 5px 5px 5px 5px;
    min-height: 100px;
  }
}
</style>
